import Taro, { Component } from '@tarojs/taro'
import { View } from '@tarojs/components'
import { AtNavBar } from 'taro-ui'

import './header.scss'

export class Header extends Component {

  constructor(props){
    super(props);
    this.state = {
      isFringe : 0,
    }
  }

  componentWillMount () { }

  componentDidMount () { 
    let that = this;
    Taro.getSystemInfo({
      success: res => {
        if(res.statusBarHeight === 44){
          that.setState({
            isFringe:1
          });
        }
      }
    });
  }

  render () {
    
    return (
      <View>
        {
          this.state.isFringe
          ?
          <AtNavBar 
            className="fringe" 
            leftIconType={this.props.leftIconType}
            onClickLeftIcon={this.props.onClickLeftIcon}
            title={this.props.title}
            color='#fff'
            />
          :
          <AtNavBar 
            className="not-fringe"
            leftIconType={this.props.leftIconType}
            onClickLeftIcon={this.props.onClickLeftIcon}
            title={this.props.title}
            color='#fff'
          />
        }
      </View>
    )
  }
}